/**
 * The MIT License (MIT)
 * 焦点图效果
 * @author 微信团队
 */

const towxImg = require('../../../utils/towxImg');
// pages/jiaodiantu/jiaodiantu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [//图片地址
      '../../image/jiaodiantu/1.png',
      '../../image/jiaodiantu/2.png',
      '../../image/jiaodiantu/3.png'
    ],
    indicatorDots: false,//是否显示面板指示点
    autoplay: false,//是否自动切换
    interval: 5000,//自动切换时间间隔
    duration: 1000,//滑动动画时长
    circular: false,//是否采用衔接滑动
    vertical: false,//滑动方向是否为纵向
    current: 0,//当前所在滑块的 index
    article: ""
  },
  //是否显示面板指示点
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  //是否自动切换
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  //是否采用衔接滑动
  changeCircular: function (e) {
    this.setData({
      circular: !this.data.circular
    })
  },
  //滑动方向是否为纵向
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  //自动切换时间间隔
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  //滑动动画时长
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  },
  //滑动事件
  eventchange: function (event) {
    console.log(event.detail)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let code = '```\n<view class="container my-page">\n  <view>焦点图效果</view>\n  <view>\n    <swiper class="jdt" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" vertical="{{vertical}}" current="{{current}}\nbindchange="eventchange">\n      <block wx:for="{{imgUrls}}" wx:key="unique">\n        <swiper-item>\n          <image src="{{item}}" class="slide-image" />\n        </swiper-item>\n      </block>\n    </swiper>\n    <button bindtap="changeIndicatorDots"> 是否显示面板指示点</button>\n    <button bindtap="changeAutoplay"> 是否自动切换 </button>\n    <button bindtap="changeCircular"> 是否采用衔接滑动 </button>\n    <button bindtap="changeVertical"> 滑动方向是否为纵向 </button>\n    <slider bindchange="intervalChange" show-value min="500" max="2000" /> 自动切换时间间隔\n    <slider bindchange="durationChange" show-value min="1000" max="10000" /> 滑动动画时长\n  </view>\n</view>\n```\n\n```\nPage({\n  /**\n   * 页面的初始数据\n   */\n  data: {\n    imgUrls: [//图片地址\n      "../../../images/jiaodiantu/1.png",\n      "../../../images/jiaodiantu/2.png",\n      "../../../images/jiaodiantu/3.png"\n    ],\n    indicatorDots: false,//是否显示面板指示点\n    autoplay: false,//是否自动切换\n    interval: 5000,//自动切换时间间隔\n    duration: 1000,//滑动动画时长\n    circular: false,//是否采用衔接滑动\n    vertical: false,//滑动方向是否为纵向\n    current: 0//当前所在滑块的 index\n  },\n  //是否显示面板指示点\n  changeIndicatorDots: function (e) {\n    this.setData({\n      indicatorDots: !this.data.indicatorDots\n    })\n  },\n  //是否自动切换\n  changeAutoplay: function (e) {\n    this.setData({\n      autoplay: !this.data.autoplay\n    })\n  },\n  //是否采用衔接滑动\n  changeCircular: function (e) {\n    this.setData({\n      circular: !this.data.circular\n    })\n  },\n  //滑动方向是否为纵向\n  changeVertical: function (e) {\n    this.setData({\n      vertical: !this.data.vertical\n    })\n  },\n  //自动切换时间间隔\n  intervalChange: function (e) {\n    this.setData({\n      interval: e.detail.value\n    })\n  },\n  //滑动动画时长\n  durationChange: function (e) {\n    this.setData({\n      duration: e.detail.value\n    })\n  },\n  //滑动事件\n  eventchange: function (event) {\n    console.log(event.detail)\n  },\n})\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})